<template>
    <div 
        class="book-store-page"
        :style="{'min-height':wHeight,
                'width':wWidth}">
        <div class="load-img" v-if='isLoading'>
            <img src="@/assets/img/loading.gif" alt="">
        </div>
        <!-- 加载完成开始渲染画面 -->
        <div v-if="!isLoading">
            <!-- 渲染轮播图 -->
            <div class="banner" v-if='pageData[0].banners != undefined'>
                <div class="banner-container">
                    <banner-x 
                        :pageWidth='9.3333'
                        :pageNum='pageData[0].banners.length'>
                        <div 
                            class="photo"
                            v-for="item,index in pageData[0].banners"
                            :key="index"
                            @click="gotoChater(item.id)">
                            <img :src="item.cover" alt="">
                        </div>
                    </banner-x>
                </div>
            </div>
            <!-- 渲染推荐的栏目 -->
            <div class="book-section">
                <book-page-section
                    v-for="item,index in pageData"
                    :key="index"
                    :detail="item">
                </book-page-section>
            </div>
        </div>

    </div>
</template>

<script>
import bannerX from '@/components/bannerX.vue'
import bookPageSection from '@/components/bookPageSection.vue'
export default {
    name: 'bookStorePage',
    props: {
        idx: Number
    },
    components: {
        bannerX,
        bookPageSection,
    },
    data() {
        return {
            wHeight: 0,
            wWidth: 0,
            pageData: {},
            isLoading: false,
        }
    },
    methods: {
        getWindowHW() {
            this.wHeight=window.innerHeight-120+'px';
            this.wWidth=document.body.clientWidth+'px';
        },
        // 请求数据
        loadData() {
            if(this.$store.state.bStore.pages[this.idx] != undefined){
                console.log('ok');
                this.pageData = this.$store.state.bStore.pages[this.idx];
            }
            else {
                this.isLoading = true;
                let urlStr = this.$store.state.bStore.urls[this.idx];
                // console.log('url',this.idx,'https://apis.netstart.cn/yunyuedu'+urlStr.url);
                axios.get('https://apis.netstart.cn/yunyuedu'+urlStr.url)
                    .then((success)=>{
                        this.pageData = success.data.list;
                        console.log('this.pageData',this.pageData,this.idx);
                        console.log('pageData[0].banners',this.pageData[0].banners);
                        this.$store.dispatch('bStore/setPageAsync',{d:this.pageData,i:this.idx});
                        // console.log(this.$store.state.bStore.pages);
                        this.isLoading = false;
                    })
                    .catch((err)=>{
                        console.log(err);
                    })
            }

        },
        gotoChater(id) {
            this.$router.push('/book-chater/'+id+'/m');
        }
    },
    created() {
        this.getWindowHW();
        window.addEventListener('resize',this.getWindowHW);
        this.loadData();
    }
}
</script>

<style lang="scss" scoped>
.book-store-page {
    // margin: 10px 0;
    // background-color: rgb(12, 132, 136);
    height: 100%;
    overflow-y: scroll;
    position: relative;
    &::-webkit-scrollbar {
        display: none;
    }
    .load-img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        img {
            width: 100px;
            height: 100px;
        }
    }
}
.banner {
    padding: 10px 0;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px -5px 10px #ccc inset;
    .banner-container {
        margin: 0 auto;
        width: 350px;
        overflow: hidden;
    }
    .photo {
        width: 350px;
        height: 130px;
        img {
            width: 350px;
            height: 130px;
        }
    }
}
</style>